<!--html注释-->
<!--1.标签 - 承载内容-->
<!--2.层叠样式表 - 渲染页面 - 一般放在前面(head里面)-->
<!--3.JavaScript - 交互式行为 - 一般放在后面(body里面)-->
<!DOCTYPE html> <!--告诉浏览器是html5的规范，写不写无所谓-->
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>沉默的大狗猪</title>
        <!-- css - cascading style sheet 层叠样式表-->
        <style type="text/css">
            h1 {/*每个h1元素的样式*/
                color: purple; /*颜色*/
                font-size: 2cm; /*字体大小*/
                font-family: "楷体"; /*字体*/
            }
            p {/*每个<p>元素的样式*/
                font-size: 1cm;
            }
            p:first-letter {/*每个<p>元素的第一个字母选择的样式*/
                font-size: 1.5cm;
                color: blue;
            }
            .a {/*a的类*/
                color: green;
            }
            .b {/*b的类*/
                color: red;
            }
            h3.c {/*每个h3元素的a类的样式*/
                font-size: 1.5cm;
                color: indigo;
            }
            a{
                color: red;
                text-decoration: none;/*不要文本装饰*/
            }
            a:hover{/*:hover在鼠标移到链接上时添加的特殊样式*/
                color: green;
            }
        </style>
    </head>
    <body>
        <a name="hello"></a><a href="#hello1">去底部</a><!-- 锚点链接 -->
        <h1>&lt;大狗猪&gt;的博客 - H<sub>2</sub>O</h1>  <!-- 标题 -->
        <hr><!-- 水平分割线 -->
        狗
        猪
        <!-- 上面在浏览器中显示为：狗 猪
        在浏览器有空白折叠，再多的空格折叠为一个空格
        使用以下方法-->
        <!--第一种<br>折行标签，段落之间没有间隙-->
        <br>
        狗<br>
        猪<br>
        <h2>孔飞翔喜欢吃的水果</h2>
        <ol><!--ol(ordered list)标签有序列表-->
            <li>苹果</li><!--li(list item)标签列表项-->
            <li>猕猴桃</li>
            <li>橘子<!--列表可以嵌套-->
                <ul>
                    <li>粑粑柑</li>
                    <li>丑橘</li>
                </ul>
            </li>
        </ol>
        <h2>孔飞翔喜欢游戏</h2>
        <ul><!--ul(unordered list)标签无序列表-->
            <li><a href="https://lol.qq.com/main.shtml">LOL</a></li><!--li标签列表项，1、页面链接-->
            <li><a href="https://pvp.qq.com/" target="_blank">王者荣耀</a></li><!--a标签target属性默认_self当前页面打开，加了_blank新开页面打开-->
        </ul>
        <dl><!--dl(definition list)标签自定义列表-->
            <!--dt(definition title)标签定义的标题
            通过在 <a> 标签中嵌套 <img> 标签，给图像添加到另一个文档的链接
            -->
            <dt><a href="https://www.python.org/"><img src="https://www.python.org/static/img/python-logo@2x.png" alt="Python" height="80" width="235"></a></dt>
            <dd>面向对象</dd><!--dd(definition description)标签定义的描述-->
            <dd>动态弱类型</dd>
        </dl>
        <!--第二种<p></p>段落标签，段落之间有间隙-->
        <h3 class="c">李白</h3>
        <p class="a">床&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;前<del>明月光</del><sup>1</sup></p> <!--标签属性-->
        <p class="b"><ins>疑似</ins>地上霜&copy;</p>
        <p>举头&trade;望<strong>明月</strong><sup>2</sup></p>
        <p class="c">低头<strong><em>思</em></strong>故乡</p>
        <button onclick="showWriter()">确定</button>
        <button onclick="shutdown()">关闭</button>
        <div>
            <p><a href="#hello">回顶部</a></p><!-- 2、锚点链接，也可以重当前页面调到其他页面，例如<a href="index.html#hello"></a> -->
            <p><a href="mailto:2311754999@qq.com">联系站长</a></p><!-- 3、功能链接：打开邮箱；打开QQ；。。。-->
            <!-- 3、功能链接：打开QQ；。。。-->
            <p><a target="_blank" href="https://im.qq.com/index"><img src="https://t7.baidu.com/it/u=1758237536,1516411475&fm=74&app=80&size=f256,256&n=0&f=PNG?sec=1648141200&t=7bfa040ad49b8f24901e6732a45f6d2b" alt="点击回复消息" title="点击回复消息"></a></p>
        </div>
        <a name="hello1"></a>
        <script>
            // 驼峰命名法
            function showWriter() {
                window.alert('作者：李白')
            }
            function shutdown() {
                if (window.confirm('确定关闭吗？')) {
                    window.close()
                }
            }
        </script>
</body>
</html>